<html>
<head>
    <meta charset="UTF-8">

    <meta name="robots" content="noindex,nofollow">
    <meta name="googlebot" content="noimageindex">

    <meta name="copyright" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">
    <meta name="format-detection" content="email=no">

    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>活动页面</title>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/app.css">

</head>
<body>

<!--焦点图-->
<div class="banner"><a href=""></a></div>

<!--分类导航-->

<div class="navbar-static">
    <nav class="J-nav navbar navbar-default">
        <div class="navbar-collapse">
            <ul id="navList" class="nav navbar-nav">
                <li class="active"><a href="#">分类1</a></li>
                <li><a href="#">分类2</a></li>
                <li><a href="#">分类3</a></li>
                <li><a href="#">分类4</a></li>
                <li><a href="#">分类5</a></li>
                <li><a href="#">分类6</a></li>
                <li><a href="#">分类7</a></li>
                <li><a href="#">分类8</a></li>
                <li><a href="#">分类9</a></li>
            </ul>
        </div>
    </nav>
</div>

<!--商品列表-->
<div class="J-list container-fluid goods-list">
    <div class="row">
        <div class="col-xs-6">
            <div class="goods-box">
                <a href="">
                    <img class="img" src="images/g-01.jpg" alt="">
                </a>
                <div class="txt-box">
                    <a class="name" href="">发希 fascy 护手霜（西柚味）</a>
                    <div><span class="character">￥</span><span class="price">209.00</span></div>

                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="goods-box">
                <a href="">
                    <img class="img" src="images/g-02.jpg" alt="">
                </a>
                <div class="txt-box">
                    <a class="name" href="">发希 fascy 护手霜（西柚味）</a>
                    <div><span class="character">￥</span><span class="price">209.00</span></div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-6">
            <div class="goods-box">
                <a href="">
                    <img class="img" src="images/g-03.jpg" alt="">
                </a>
                <div class="txt-box">
                    <a class="name" href="">发希 fascy 护手霜（西柚味）</a>
                    <div><span class="character">￥</span><span class="price">209.00</span></div>

                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="goods-box">
                <a href="">
                    <img class="img" src="images/g-04.jpg" alt="">
                </a>
                <div class="txt-box">
                    <a class="name" href="">发希 fascy 护手霜（西柚味）</a>
                    <div><span class="character">￥</span><span class="price">209.00</span></div>

                </div>
            </div>
        </div>
    </div>


</div>

<!--加载提示-->
<div class="J-loading loading">
    <span>努力加载中...</span>
</div>

<!--商品模板-->
<script id="tpl" type="text/html">
    <div class="col-xs-6">
        <div class="goods-box" data-id="${id}">
            <a href="">
                <img class="img" src="${img}" alt="">
            </a>
            <div class="txt-box">
                <a class="name" href="">${name}</a>
                <div><span class="character">￥</span><span class="price">${price}</span></div>
            </div>
        </div>
    </div>
</script>

<!--依赖js-->
<script src="js/zepto.min.js"></script>
<script src="js/app.js"></script>

<script>

    //设置导航的宽度
    var navList = document.getElementById('navList');
    var lis = navList.getElementsByTagName('li');
    var width = 0;
    var isLoading=false;
    var page=1;
    var tpl=$('#tpl').html();

    for (var i = 0; i < lis.length; i++) {
        var childLi = lis[i], w = 0;
        w = childLi.offsetWidth;
        width += w;
    }
    navList.style.width = width + 'px';


    //滚动加载新内容
    window.onscroll=function(){
        var winH=window.screen.height;
        var totalH=document.body.scrollHeight ;
        var scrollH=getScrollTop();

        //顶部导航
        $('.J-nav').toggleClass('navbar-fixed-top',scrollH>=150);

        //加载新数据
        if(totalH-scrollH<winH+50&&!isLoading){
            console.log('请求');
            isLoading=true;
            $.ajax({
                url:'data/goods.json',
                dataType:'',
                type:'post',
                data:{'page':page},
                success:function(res){
                    if(res.status){
                        page++;
                        var html=[];
                        html.push('<div class="row">');
                        for(var i=1;i<=res.data.length;i++){
                            html.push(htmlTemplate(tpl,res.data[i-1]));
                            if(i%2==0){
                                html.push('</div>')
                            }
                            if(i%2==0&&i<res.data.length){
                                html.push('<div class="row">')
                            }
                        }

                        $('.J-list').append(html.join(" "));
                        isLoading=false;

                    }else{
                        //todo 无数据
                        isLoading=false;

                    }

                }
            });
        }
    };



</script>


</body>
</html>